.container {
  display: flex;
  height: 100%;
  justify-content: center;
  margin: 0;
  max-width: 100%;
  padding: 0;
  position: relative;
  z-index: 20;

  &.search {
    .alert p {
      @include text-overflow-ellipsis;
    }
  }
}

.float-nowrap {
  overflow: auto;
  width: 200%;
}

.float-right {
  float: right;
}

.header-panel {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  font-size: 1.3rem;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  position: relative;
}

.overlay {
  align-items: center;
  background-color: var(--color-overlay);
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

.darker-overlay {
  @extend .overlay;

  background-color: var(--color-darker-overlay);
}

.footer {
  margin-top: 1rem;
  text-align: center;
}

.view {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  width: 100%;
}

.view-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0.75rem;
  z-index: 0;
}

.view-overlay {
  overflow: hidden;

  &::after {
    @extend .overlay;

    content: '';
    z-index: -1;
  }

  h4 {
    font-size: 1.5rem;
    line-height: 1.8rem;
    margin-bottom: 1.5rem;
    text-align: center;
  }

  p,
  ul {
    font-size: 1.1rem;
    line-height: 1.4rem;
  }

  ul {
    margin-bottom: 0.75rem;
    padding-left: 1rem;
  }

  .buttons {
    margin-top: 1rem;

    &.small {
      button {
        font-size: 1rem;
        line-height: 2.1rem;
        padding: 0 0.5rem;
      }
    }
  }

  .view-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem;
  }
}

.well {
  @include box-shadow;

  background-color: var(--color-well-bg);
  border-radius: $border-radius-well;
  border-width: 0;
  color: var(--color-well-text);
  margin-bottom: 0.75rem;
  overflow: hidden;
  padding: 1rem 1.25rem;

  a {
    border-bottom-color: var(--color-well-link);
    color: var(--color-well-link);

    @media (hover: hover) {
      &:active,
      &:focus,
      &:hover {
        border-bottom-color: var(--color-well-link-hover);
        color: var(--color-well-link-hover);
      }
    }
  }

  h4 {
    text-align: center;
  }

  .confirm {
    margin-bottom: 0;
    width: 100%;
  }

  .form-group {
    &.has-error {
      input,
      textarea {
        &.form-control {
          border-color: var(--color-danger) !important;
          color: var(--color-danger) !important;

          &::placeholder {
            color: var(--color-danger) !important;
            opacity: 0.8 !important;
          }
        }
      }
    }

    input,
    textarea {
      &.form-control {
        border-color: var(--color-well-input-border) !important;
        border-style: solid !important;
        border-width: 1px !important;
      }
    }
  }
}
